<template>
  <el-container v-loading="loading">
    <el-header >
      数据表格
        <el-date-picker type="date" placeholder="选择日期" v-model="searchCondition.fdatestart" :clearable="false" ></el-date-picker>
        <el-date-picker type="date" placeholder="选择日期" v-model="searchCondition.fdateend" :clearable="false"></el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="handlerQuery">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="handlerAdd">增加</el-button>
        <el-button type="danger" icon="el-icon-remove" @click="handlerDeleteSelection" >批量删除</el-button>
    </el-header>
    <el-main>
      <el-table :data="filterData.list"   stripe  @selection-change="handlerSelectionChange">

        <el-table-column type="selection" width="50">

        </el-table-column>
        <el-table-column prop="fid" label="主键" width="140" align="left">
        </el-table-column>        
        <el-table-column prop="fdate" label="日期" width="140" align="left">
        </el-table-column>
        <el-table-column prop="fstate" label="启用状态" width="140" align="left">
          <template slot-scope="scope">
              <el-button v-if="scope.row.fstate===1" type="success" @click="handlerChgState(scope.row)">已启用</el-button>
              <el-button v-else type="danger" @click="handlerChgState(scope.row)">已禁用</el-button>
          </template>>
        </el-table-column>        
        <el-table-column prop="fimageurl" label="图片" width="140" align="left">
            <template slot-scope="scope">
               <img v-lazy="scope.row.fimageurl"  class="imageclass"  @click="handlerShowImage(scope.row)">
           </template>
        </el-table-column>        
        <el-table-column width="100"  label="操作">
            <template slot-scope="scope">
              <el-button @click="handlerEdit(scope.row)" type="primary" icon="el-icon-edit" >修改</el-button> 
           </template>
        </el-table-column>
        <el-table-column width="100"  label="">
            <template slot-scope="scope">
              <el-button @click="handlerDelete(scope.row)" type="danger" icon="el-icon-delete" >删除</el-button>
           </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
              <el-pagination
        background
        layout="prev, pager, next"
        :total="filterData.total"  :page-size="filterData.pageSize"  
                                   :current-page="filterData.pageNum"  
                                   @current-change="PageChange">
      </el-pagination>  
    </el-footer>

  <el-dialog   title="图片详情" :visible.sync="dialogImageVisible"  width="50%">
         <img v-lazy="selectRow.fimageurl"  class="imagebigclass"  > 
  </el-dialog>

  <el-dialog
    title="信息维护"
    :visible.sync="dialogVisible"
    width="30%"
   >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.fdate" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="图片">
                    <el-upload
                      class="avatar-uploader"
                      :action="uploadurl"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess">
                      <img v-lazy="form.fimageurl" class="imageclass" >
                    </el-upload>

          </el-form-item>

          <el-form-item label="启用状态">
              <el-switch
                v-model="form.fstate"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit"  icon="el-icon-upload">{{buttontitle}}</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
  </el-dialog>
</el-container>
</template>
<script>
  import serverurl from '@/utils/env'
  import axios from '@/utils/request'
  export default {
    data() {
      
      return {
        tableData:[],
        filterData:{
          pageSize:5,
          pageNum:1,
          total:-99,
          list:[]
        },
        dialogVisible:false,
        dialogImageVisible:false,
        initselectRow:{
            fstate:false,
            fdate:null,
            fid:'',
            fimageurl:''
        },
        selectRow:{
            fstate:false,
            fdate:null,
            fid:'',
            fimageurl:''
        },
        isedit:false,
        buttontitle:'',
        form:{
            fstate:false,
            fdate:null,
            fid:'',
            fimageurl:''
        },
        loading:true,
        uploadurl:serverurl.image,
        multipleSelection: [],
        searchCondition:{

          fdatestart:this.$moment(),
          fdateend:this.$moment()
        }
      }
    },
    mounted(){

       this.handlerQuery()
    }
    ,
    methods:{

        handlerQuery()
        {

          const params={   pagenum:this.filterData.pageNum,
                           pagesize:this.filterData.pageSize,
                           datestartstr:this.$moment(this.searchCondition.fdatestart).format('YYYY-MM-DD'),
                           dateendstr:this.$moment(this.searchCondition.fdateend).format('YYYY-MM-DD')
                      }
          this.loading=true
          axios.get('/study/queryall',params).then(response=>{
            this.filterData=response.data;
            this.loading=false
          }).catch(error=>{
              this.loading=false
          })
        }
        ,
        handleAvatarSuccess(res, file) {

            console.log(res.instance)
            this.form.fimageurl = res.instance;
        }
        ,
        handlerAdd() {
       
            this.selectRow=Object.assign({},this.initselectRow)
            this.dialogVisible=true
            this.form.fstate=false
            this.form.fdate=Date.now()
            this.form.fimageurl=''
            this.buttontitle='保存'     
            this.isedit=false       
        },
        handlerEdit(row) {

            this.isedit=true
            this.selectRow=row
            const params={fid:row.fid}
            this.buttontitle='更新'
            const _this=this;
            axios.queryjsonobject('/study/queryinstance',params).then(response=>{
              const result=response.data
              if(result.success===true) {

                _this.form.fstate=result.instance.fstate===1
                _this.form.fdate=this.$moment(result.instance.fdate,'YYYY-MM-DD').toDate()
                console.log(_this.form.fdate)
                _this.form.fimageurl=result.instance.fimageurl
                _this.form.fid=result.instance.fid
                _this.dialogVisible=true
              } else {
                _this.dialogVisible=true
              }
            })
        },    
        handlerDelete(row){

            const params={fid:row.fid}
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

              const _this=this
              axios.postjsonobject('/study/delete',params).then(response=>{
                const result=response.data
                _this.handlerQuery();  
                _this.dialogVisible=false
              })              
            
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });


        },
        onSubmit(){
          let _this=this
          const item=Object.assign({},this.form)
          if(item.fstate===false) {
            item.fstateint=0
          } else {
            item.fstateint=1
          }
          item.fdatestr=this.$moment(item.fdate).format("YYYY-MM-DD"); 
          if(this.isedit===true) {

            axios.postjsonobject('/study/update',item).then(response=>{
              if(response.data===true) {
                this.handlerQuery();
                this.dialogVisible=false
              }
            })
          } else {

            axios.postjsonobject('/study/insert',item).then(response=>{
              if(response.data===true) {
                this.handlerQuery();
                this.dialogVisible=false
              }
            })
          }
         

        },
        dateFormat(row, column) { 
           var date = row[column.property]; 
            if (date == undefined) { 
                return ""; 
            } 
            return this.$moment(date).format("YYYY-MM-DD"); 
        } 
        ,
        handlerShowData(currentpage){
          this.filterData.pageNum=currentpage
          this.handlerQuery()
        }
        ,
        PageChange(val){
          this.handlerShowData(val)
        }
        ,
        handlerShowImage(row){
           console.log(row)
           this.selectRow=row           
           this.dialogImageVisible=true
          
        },
        handlerChgState(row){
            const params={fid:row.fid}
            axios.postjsonobject('/study/chgstate',params).then(response=>{
              if(response.data===true) {
                this.handlerQuery();
                this.dialogVisible=false
              }
            })
        },
        handlerSelectionChange(val){

            this.multipleSelection=val
        },
        handlerDeleteSelection(){

          if(this.multipleSelection.length===0) {
              this.$message({
                type: 'info',
                message: '无选中数据!'
              });      
          } else {
             
             const array=[]
             this.multipleSelection.forEach((item,index)=>{
                array.push(item.fid)
             })
             const params={ ids:JSON.stringify(array) }
             axios.postjsonobject('/study/deleteselection',params).then(response=>{
                if(response.data===true) {
                  this.handlerQuery();
                  this.dialogVisible=false
                }
             })
          }
        }
    }
  };
</script>
<style>
  .container{

      border: 1px solid #eee;
      width:100%;
      height:100%;
  }
  .imageclass{

      width:50px;
      height:50px
  }

  .imagebigclass
  {

      width:50%;
      height:50%;
  }

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>
